<template>
  <div>
    <detailbanner :sightName='sightName' :bannerImg='bannerImg' :gallaryImgs='gallaryImgs'></detailbanner>
    <detailheader></detailheader>
    <div class="content">
      <detaillist :list='list'></detaillist>
    </div>
  </div>
</template>

<script>
import detailbanner from './components/banner'
import detailheader from './components/header'
import detaillist from './components/list'
import axios from 'axios';
export default {
  name:'Detail',
  components:{
    detailbanner,
    detailheader,
    detaillist
  },
  data(){
    return{
      lastdata:'',//临时缓冲项
      sightName:'',
      bannerImg:'',
      gallaryImgs:[],
      list:[
    ]
    }
  },
  methods:{
    getDetailInfo(){
      axios.get('/api/detail.json?id='+this.$route.params.id)
      //{
        //params:{
         // id:this.$route.params.id//获取动态路由
        //}
      //}
      .then(this.handelgetdatasucc)
    },
    handelgetdatasucc(res){
      res=res.data
      if(res.ret&&res.data){
        const data=res.data
        console.log(data)
        this.sightName=data.sightName
        this.bannerImg=data.bannerImg
        this.gallaryImgs=data.gallaryImgs
        this.list=data.categoryList
      }
    }
  },
  mounted(){
    this.lastdata=this.$route.params.id
    this.getDetailInfo()
  },
  activated(){
    if(this.lastdata!==this.$route.params.id){
       this.lastdata=this.$route.params.id
       this.getDetailInfo()
    }
  }
}

</script>

<style lang="stylus" scoped>  
  .content
    height:20rem
</style>
